<template>
  <div class="add1">
    <Banner @from-child="receiveFromChildTop"></Banner>
    <Middle :content="childData">
      <template #header>
        <p style="background-color:red;color:white;padding: 5px">{{ header }}</p>
      </template>

      <template #main="slotProps">
        <p style="padding: 5px">{{ slotProps.text }}</p>
      </template>

      <template #footer>
        <p style="padding: 5px">{{ footer }}</p>
      </template>
    </Middle>
    <Bottom
      one="腾讯网"
      two="百度网"
      three="搜狐网"
      four="阿里巴巴"
      five="网易网"
      six="新浪网"
      @from-child="receiveFromChild"
    ></Bottom>
  </div>
</template>
<script>
import Banner from "/src/components/Top.vue";
import Middle from "/src/components/Middle.vue";
import Bottom from "/src/components/Bottom.vue";

export default {
  name: "AddOne",
  data() {
    return {
      insert: "hello,world!",
      header: null,
      main: "中部插槽",
      footer: "底部插槽",
      childData: null,
    };
  },
  components: {
    Banner,
    Middle,
    Bottom,
  },
  methods: {
    receiveFromChildTop(data) {
      // 接收子组件传递的数据
      this.header = data;
    },
    receiveFromChild(data) {
      // 接收子组件传递的数据
      this.childData = data;
    },
  },
};
</script>
